/*  */

html, body { margin:0; padding:0; height:100%; font-size: 10px; cursor: url('../about/images/flagmerge.svg');  }


html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}


@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic);



body {font-family: 'Lato', sans-serif; font-weight: 300; color: black;    }
	#wrapper div { width:100%; margin:auto; }
		.transform { 	 -webkit-transition: all	0.5s ease-in-out;
							-moz-transition: all	0.5s ease-in-out;
							  -o-transition: all	0.5s ease-in-out;
								 transition: all 	0.5s ease-in-out;
							}



	
#wrapper { min-height:100%; position:relative;  }

/* 		Header       		*/
/* 		Header Part A 		*/
				 
	#header { height:100px; background: rgba(0,0,0,0.8); color:rgba(255,255,255,1.00); font-size:5.2rem; position:relative; z-index:101; text-align:left; 	box-shadow:  0 0 10px 11px rgba(36,36,36,0.50), inset  0px 1px 1px rgba(136,136,136,0.50); vertical-align:central; }

	#layout { awidth:100%; max-width:1100px;  position: relative;  line-height:100px;}
						#layout a 			{ color:rgba(255,255,255,1); text-decoration:none; }
						#layout a:visited 	{ color:rgba(255,255,255,1);  }
						#layout a:active 	{ color:rgba(255,255,255,1);  }
						#layout a:hover   	{ color:rgba(153,204,51,1);  }
				
					#layout  ul { position: absolute; width:570px ; right:0px; top:-20px; font-size:2rem;    padding:0px; text-align:center; list-style: none; line-height:100px; text-decoration-line: line-through; }
						#layout ul li	{ float: left; width:calc(100% /6 - 1px) ;  margin-right:1px;   }	
						#layout ul li > span	{ filter: 			blur(1px); opacity:0.8;     }	



							#layout ul li:nth-of-type(5) span	{ display: block;}
								#layout ul li:nth-of-type(5)	{  height:10px; line-height:20px ; position:relative; top:30px; }

				 /* image height mius header height */
	#image {   min-height:calc(590px + 100px); position: relative; top:-100px; padding-top:100px; padding-bottom:100px;    width:100vw;  font-size:1.5em; z-index:100; position: relative; 
	background-size: cover; 	background-position:center;
									-webkit-filter:	blur(0px);
									-moz-filter: 	blur(0px); 
									filter: 			blur(0px); opacity:1; }
									





			.options {top:calc(590px - 50px);}/* out of place to simplfy total height  */
		
	@media screen and (max-width: 1200px) { 		#header { height:120px;  font-size:5rem; text-align:center; 	vertical-align:central; line-height:4.8rem;}
													#image {    top:-120px;    }
														
														#layout  ul {  width:100% ; right:0px; top:50px; font-size:2rem;     line-height:50px;}
															#layout ul li:nth-of-type(5) span	{ display: inline;}
															#layout ul li:nth-of-type(5)	{  height:45px; line-height:50px ;  top:0px; }}
														
	@media screen and (max-width: 740px) {			#layout { line-height:70px;}
														#layout  ul {  top:45px; }
															#layout ul li:nth-of-type(5) span	{ display: block;}
															#layout ul li:nth-of-type(5)	{   line-height:17px ; height:25px;  top:8px ; }

															
															}

	@media screen and (max-width: 550px) { 			#header { height:110px;  font-size:3.9rem; text-align:center; 	vertical-align:central; line-height:10px; }
													#image {    top:-110px;    }
													
													#layout { line-height:70px;}
														#layout  ul {  top:40px; }}
							
	@media screen and (max-width: 508px) { 	   	#header {font-size:3.3rem; line-height: 1rem;	}	
												
										
		
										#layout ul li:nth-of-type(1){ width:calc(100% / 30 * 8 - 1px);}
										#layout ul li:nth-of-type(2){ width:calc(100% / 30 * 8 - 1px);}
										#layout ul li:nth-of-type(3){ width:calc(100% / 30 * 6 - 1px);}
										#layout ul li:nth-of-type(5){ width:calc(100% / 30 * 8 - 1px);}
		
		
		
		
												#layout ul li:nth-of-type(4), #layout ul li:nth-of-type(6)	{ display:none;}}
									

	@media screen and (max-width: 415px) { 

		#layout ul { width: 90%; right: 5%;}}

	@media screen and (max-width: 380px) { 	   		#header {font-size:3.1rem; line-height: 1rem;	}	
		#layout ul { width: 94%; right: 3%;}
														#layout ul li	{font-size:1.8rem;}}

	@media screen and (max-width: 370px) { 	   		






}








/* 		Header Part B 		*/

		.options {background: rgba(255,255,255,0.5); box-shadow:  0 0 10px 1px rgba(136,136,136,0.50), inset  0px 1px 1px rgba(136,136,136,0.50);  position: relative; font-size:;  z-index:101 !important; text-align:center; line-height:50px; overflow:hidden; }
		



		
				.opt-scroll, .opt-e-scroll  { position: fixed !important; top: 0px !important; background:  rgba(255,255,255,0.95) !important; box-shadow:  0 5px 10px 1px rgba(136,136,136,0.50), inset  0px 1px 1px rgba(136,136,136,0.50) !important; }
				
				.opt-scroll, .opt-scroll *, .opt-e-scroll, .opt-e-scroll * { 	-webkit-transition: 		background-color 300ms linear;
										-moz-transition: 		background-color 300ms linear;
										-o-transition:			background-color 300ms linear;
										-ms-transition: 		background-color 300ms linear;
										transition: 			background-color 300ms linear;	}
										

	.options  ul { position: relative; width:100% ;   margin:auto; padding:0px; text-align:center; list-style: none; line-height:50px;  max-width:1100px; vertical-align:central; } 
				
						.options 	a 			{ color:rgba(0,0,0,1); text-decoration:none;	}
						.options 	a:visited 	{ color:rgba(0,0,0,1);  						}
						.options  	a:active 	{ color:rgba(0,0,0,1);  						}
						.options  	a:hover		{ color:rgba(153,204,51,1);  				}
	
							.options ul li	{ float:left; margin-right:1px; 
																	transition: 			width 1s, margin-right 1s, opacity 2s; height:50px;	

																																  }
		




							.options ul li a	{ font-size:2.5rem; top:; position:; font-weight: 220; vertical-align:central; 	  }
								
							.options ul li:first-child { display:none; font-size:3rem; }
								
 
						
						
								
								
								#options ul li					{ width:calc((100% - 210px) / 1 - 1px);  }
								
								#options ul li:nth-of-type(1)  	{ width:0;}
								#options ul li:nth-of-type(2)  	{ width:calc((210px) - 1px); text-align: left; font-weight:500;   }

								#options ul li:nth-of-type(2) a 	{ font-weight:5500;  font-size: 3rem; padding-left:10px;}


								#options ul li:nth-of-type(3)  	{ width:0;}

								#options ul li:nth-of-type(5)  	{ text-align: right; background: rgba(255,0,4,00);  }
								#options ul li:nth-of-type(5) a  	{ padding-right:10px;}

							
							
							
								.opt-scroll ul li					{ width:calc((100% - 210px - 50px  ) / 1 - 1px) !important;}
								#options ul li:nth-of-type(2)  	{ width:calc((210px) - 1px) !important;   }

								
								.opt-scroll ul li:nth-of-type(3)  	{ width:calc((50px) - 1px) !important; margin-left: 0px;}
								
								.opt-scroll ul li:nth-of-type(4)  	{ width:0 !important;  display:none;  }




								.opt-scroll ul li:nth-last-of-type(1)  	{ width:50px !important;
																		 display:none;	}
							
								
	@media screen and (max-width: 415px) 	{ 		#options ul li 	{ width:100% !important; display: none;}
		
		
													#options ul li:nth-of-type(2)	{ display: block ; text-align-last: center;}
													#options ul li:nth-of-type(2) a	{ width: 100%; text-align: center !important; font align-content: center; }

}







								


								
							.options #logo *	 {  font-size:4.2rem;  }
							.options #logo	span:first-child { left:8px; position: relative; bottom:3px; }
							.options #logo	span:last-child { right:8px; position: relative;    top:4px; }
							
								.options ul #logo 	{ width:0px ; margin-right:0px; overflow:; } 
								
								.options ul #logo span  	{  opacity:0;} 

									
									.opt-scroll ul #logo, .opt-e-scroll ul #logo	{ opacity:1 !important; 
									-webkit-transform: 		width 1s, margin-right 1s, opacity 2s !important;
									-moz-transition: 		width 1s, margin-right 1s, opacity 2s !important;
									-o-transition:			width 1s, margin-right 1s, opacity 2s !important;
									-ms-transition: 		width 1s, margin-right 1s, opacity 2s !important;
									transition: 			width 1s, margin-right 1s, opacity 2s !important;	}

									.opt-scroll ul #logo span , .opt-e-scroll ul #logo span 	{ opacity:1 !important; 
									transition: 			 opacity 6s !important;	}





							.options #icon * 	 {  font-size:3rem;  }
							
								.options ul #icon 	{ width:0px ; margin-right:0px; opacity:0 !important;} 
								.options ul #icon a i 	{  opacity:0 !important;} 
									
									.opt-scroll ul #icon  	{ opacity:1 !important; 
									-webkit-transform: 		width 1s, margin-right 1s, opacity 2s !important;
									-moz-transition: 		width 1s, margin-right 1s, opacity 2s !important;
									-o-transition:			width 1s, margin-right 1s, opacity 2s !important;
									-ms-transition: 		width 1s, margin-right 1s, opacity 2s !important;
									transition: 			width 1s, margin-right 1s, opacity 2s !important;	}

						
									.opt-scroll ul #icon a i  	{ opacity:1 !important; 
									transition: 			 opacity 6s !important;	}









						

				
/*
home page specific ???? */


	
/*
end of home page specific ???? */




/*	
		@media screen and (max-width: 480px) { 	   	#options ul li	{ display: none;} 
												#options ul li:first-child { display: inline; width:75px !important;}
												#options ul #logo	{ width:calc(100% - 150px) !important; display:inline;  } 


		

	}*/






								.options ul li:first-child  	{  opacity:0;} 
									
									.opt-scroll ul li:first-child 	{ opacity:1 !important; 
									-webkit-transform: 		opacity 2s !important;
									-moz-transition: 		width 1s, margin-right 1s, opacity 2s !important;
									-o-transition:			width 1s, margin-right 1s, opacity 2s !important;
									-ms-transition: 		width 1s, margin-right 1s, opacity 2s !important;
									transition: 			 opacity 2s !important;	}









		#content { text-align: justify; position:relative;  background: transparent; font-size:2rem;
		/*	padding-bottom:70px; /* Height of the footer element */
				   width:100%; overflow-x: hidden;  top:-100px; 

}


				#content 	a 			{ color:rgba(153,204,51,1); text-decoration:none;	}
				#content	a:hover		{  color:rgba(105,59,213,1); 							}



	@media screen and (max-width: 1200px) { 		
#content { top:-120px;    }}
					  
					  
								   /* this padding */
			#content > div { margin:auto; position: relative; margin-top:10px; 	 padding-top:65px; padding-bottom: 15px;   width:calc(100% - 40px); max-width:1100px; box-shadow:  0 24px 2px 0px  white, 0 32px 10px -12px  rgba(36,36,36,0.50) ;   
			
			
			}
			
			

				
				#content > div:last-child {  min-height:calc(100vh - 55px + 5px - 0px );
							/* so we have  			   view  - footer + bar - *padding*    -65 shows footer +10 hides blur */ }
		
			
			#content div h2 { padding-top:50px;}
			#content div h2:nth-of-type(1) { padding-top:0px !important;}
			#content div:nth-last-of-type(2) { box-shadow: none !important;}

				

		.content-image { position: relative; top:0px; left:0px;   background-size: cover !important; background-position:center !important; border-radius:4px;}
		
			.content-image-container { position: relative; top:-8px;  padding:1rem; z-index: 10;   }
				
				


							.logo	span:nth-of-type(1) { left:0.2em; position: relative; bottom:0.08em; }
							.logo	span:nth-of-type(2) { right:0.2em; position: relative;    top:0.1em; }





/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
    body { background: black; color: white;}
    #header { background: rgba(0,0,0,0.8); color:rgba(255,255,255,1.00); 	box-shadow:  0 0 10px 11px rgba(136,136,136,0.50), inset  0px 1px 1px rgba(36,36,36,0.50); vertical-align:central; }
    
    .options {background: rgba(0,0,0,0.5)!important; box-shadow:  0 0 10px 1px rgba(36,36,36,0.50), inset  0px 1px 1px rgba(36,36,36,0.50);   }
    
        .options a 			{ color:rgba(255,255,255,1);  }
        .options a:visited 	{ color:rgba(255,255,255,1);  }
        .options a:active 	{ color:rgba(255,255,255,1);  }
    
   	.opt-scroll, .opt-e-scroll  { position: fixed !important; top: 0px !important; background:  rgba(0,0,0,0.95) !important; box-shadow:  0 5px 10px 1px rgba(119,119,119,0.50), inset  0px 1px 1px rgba(119,119,119,0.50) !important; }

    
    			#content > div {  box-shadow:  0 24px 2px 0px  black, 0 36px 10px -12px  rgba(119,119,119,0.50) ;   
			
			
			}




}















	#footer {width: 100%;  height:55px; position: absolute; bottom:000px;  box-shadow:  0 0 10px 1px rgba(136,136,136,0.50), inset  0px 1px 1px rgba(136,136,136,0.50); z-index:103; background:rgba(255,255,255,1.00); line-height:50px; text-align:center; vertical-align:central; font-size:2rem; overflow:hidden;}

			footer span a { padding: 7px 10px; text-decoration: none; color:black;  font-weight: 300; }
			footer .right {	float: right;}
			footer .left {	float: left;}
			
			footer .center { font-size:4rem; font-weight:300; width:100%; left:0%;  margin:auto; position: absolute;  		 }
			
			footer .center  a 			{ color:rgba(0,0,0,1); text-decoration:none; }
			footer .center  a:visited 	{ color:rgba(0,0,0,1);  }
			footer .center   a:active 	{ color:rgba(0,0,0,1);  }
			footer .center   a:hover 	{ color:rgba(153,204,51,1);  }
			
				footer .center  ul { position:absolute; width:calc(100% - 280px) ; left:140px;   margin:auto; padding:0px; text-align:center; list-style: none; line-height:50px; }
															
						
					footer .center ul li	{ float:left; width:calc((100% - 400px) / 6 - 1px);  margin-right:1px;  background: rgba(12,26,184,0); height:50px;}
					footer .center ul li a	{ font-size:1.8rem; top:-5px; position:relative; font-weight: 220;  }
					
							footer .center ul li:nth-of-type(4)	{ 	width:calc(400px - 2px);  } 


					
													
	@media screen and (max-width: 1500px) {	footer .center ul li:nth-of-type(6) span	{ display: block;}
											footer .center ul li:nth-of-type(6)	{  height:5px; line-height:17.5px ; position:relative; top:-10px; }	}
	@media screen and (max-width: 1200px) { footer .center ul li	{ display:none;  }
											footer .center ul li:nth-of-type(4)	{ 	width:calc(100% - 2px); display:block;  } }
	@media screen and (max-width: 640px) { 	footer .center  ul {  width:calc(100% - 80px); left:40px; }}
							
		footer span a .fo-text  { padding: 0 20px;  font-size: 14px; }
		footer span .mo-text  {  background:rgba(87,182,179,0.47);   font-size: 16px; display:inline; margin: 0 0%; }
	
	@media screen and (max-width: 600px) { 	
							#footer {position: fixed; } footer span a .fo-text {display: none; } footer .center { font-size:3.4rem; font-weight:270; }
		#content > div:last-child {  min-height:calc(100vh - 65px - 55px + 0px );}


						}

	@media screen and (max-width: 376px) { 	footer .center { font-size:2.8rem; font-weight:270; }}

	@media screen and (max-width: 321px) { 	footer .center { font-size:2.7rem; font-weight:270; }}

	@media screen and (min-width: 1100px) {	footer span .mo-text{ }	 }
	
	
		@media screen and (max-height: 500px) { 	#footer {position: absolute; } }




	.progress 		{height:4px; bottom:0px; left:0px; position:fixed;		}
	#progress 		{ background:hsl(100, 00%, 00%); z-index:999999;  		}
	#progressBASE 	{ width: 100%; background:#FFFFFF; z-index:999998; 		}









/*
, gallery 
*/




@font-face {
	font-family: 'fontawesome';
	src:url('../global fonts/fontawesome/fontawesome.eot?-e43dk9');
	src:url('../global fonts/fontawesome/fontawesome.eot?#iefix-e43dk9') format('embedded-opentype'),
		url('../global fonts/fontawesome/fontawesome.woff?-e43dk9') format('woff'),
		url('../global fonts/fontawesome/fontawesome.ttf?-e43dk9') format('truetype'),
		url('../global fonts/fontawesome/fontawesome.svg?-e43dk9#fontawesome') format('svg');
	font-weight: normal;
	font-style: normal;
} /* Made with http://icomoon.io/app */

/* General style */
.grid-gallery ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.grid-gallery figure {
	margin: 0;
}

.grid-gallery figure img {
	display: block;
	width: 100%; border-radius:5px;
}


/* Grid style */
.grid-wrap {
	max-width: 69em;
	margin: 0 auto;
	padding: 0 1em 1.875em;
}

.grid {
	margin: 0 auto;
}

.grid li {
	width: 25%;
	float: left;
	cursor: pointer;
}

.grid figure {
	padding: 15px;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.grid li:hover figure {
	opacity: 0.5;
}


/* Slideshow style */
.slideshow {
	position: fixed;
	background: rgba(0,255,255,0.9);
	width: 100vw;
	height: 100vh;
	margin-top: 00px;
	top: 0 ; z-index: 500;
	left: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}
@media (prefers-color-scheme: dark) {
.slideshow {
	background: rgba(255,0,0,0.9); 
	}
}

.slideshow-open .slideshow {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.slideshow ul {
	width: 100vw;
	height: 100vh;

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,150px);
	transform: translate3d(0,0,150px);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s; 
}

.slideshow ul.animatable li {
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow-open .slideshow ul {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.slideshow li {
	width: 90vw;
	height: 90vh;
	position: absolute;
	top: 50vh;
	left: 50vw;
	margin: -45vh 0 0 -45vw;
	visibility: hidden;  
}

.slideshow li.show {
	visibility: visible;
}

.slideshow li:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s; 
}

.slideshow li.current:after {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
	transition: opacity 0.3s, visibility 0s 0.3s;
}

.slideshow figure {
	overflow: hidden;   
}
.slideshow figure img {
max-height: 90vh;
max-width: 90vw; 
object-fit: cover; object-position: top; 	border: 4px solid #fff; border-radius: 10px;

}

/* Navigation */
.slideshow nav span {
	position: fixed;
	z-index: 1000 !important;
	color: #59656c;
	text-align: center;
	padding: 3%;
	cursor: pointer;
	font-size: 2.2em;
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.slideshow nav span.nav-next {
	right: 0;
}

.slideshow nav span.nav-close {
	top: 0;
	right: 0;
	padding: 0.5em 1em;
	color: #31373a;
}

.icon:before,
.icon:after {
	font-family: 'fontawesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

span.nav-prev:before {
	content: "\e601";
}

span.nav-next:before  {
	content: "\e600";
}

span.nav-close:before {
	content: "\e602";
}

/* Info on arrow key navigation */
.info-keys {
	position: fixed;
	top: 10px;
	left: 10px;
	width: 60px;
	font-size: 8px;
	padding-top: 20px;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
}

.info-keys:before,
.info-keys:after {
	position: absolute;
	top: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
}

.info-keys:before {
	left: 10px;
	content: "\e603";
}

.info-keys:after {
	right: 10px;
	content: "\e604";
}

/* Example media queries (reduce number of columns and change slideshow layout) */

@media screen and (max-width: 60em) {
	/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
	.grid li {
		width: 33.3%;
	}

    @media screen and (max-width: 50em) {
	/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
	.grid li {
		width: 50%;
	}

    
    
    
	.slideshow li {
		top: 0;
		left: 0;
		margin: 0;
	}

	.slideshow li figure img {
		width: auto;
		margin: 0 auto;
		max-width: 100%;
	}

	.slideshow nav span,
	.slideshow nav span.nav-close {
		font-size: 1.8em;
		padding: 0.3em;
	}

	.info-keys {
		display: none;
	}

}


@media screen and (max-width: 24em) {
	.grid li {
		width: 100%;
	}
}